<script setup>
import { computed, toRaw, defineProps, defineEmits, reactive, ref, onMounted, watch } from 'vue';
import { deptSubmit, getUserList, getDeptList, getUserAllList, leaveOperate } from '@/api';
import moment from 'moment';

const emits = defineEmits(['closed']);

const props = defineProps({
  action: String,
  isShowDialog: Boolean,
  deptItem: Object
});

// { action, deptItem, isShowDialog }

const deptForm = ref()
const state = reactive({
  deptForm: {
    parentId: [null],
  },
  deptList: [],
  userList: [],
  userMap: new Map(),
})

const day = computed(() => {
  const { startTime, endTime } = props.deptItem;
  return `${((new Date(endTime) - new Date(startTime)) / 1000 / 60 / 60 / 24) + 1} 天`;
})

const rules = {
  // parentId: [
  //   { required: true, message: '请选择上级部门', trigger: 'blur' },
  // ],
  remark: [
    { required: true, message: '请选输入备注', trigger: 'blur' },
  ],
}

onMounted(async () => {
  query()
})

const query = async () => {
  const list = await getUserAllList()
  state.userList = list
  for (const user of list) {
    state.userMap.set(user._id, toRaw(user))
  }
  state.deptList = await getDeptList(state.queryForm)
}

watch(() => props.isShowDialog, (val) => {
  console.log('isShowDialog: ', val)
  if (val === true) {
    state.deptForm.userName = props.deptItem.userId
    query()
  }
})

watch(() => props.deptItem, () => {
  console.log('props.deptItem', props.deptItem);
  state.deptForm = {
    ...props.deptItem
  }
})

// 3: '审批拒绝',
// 4: '审批通过',
const handelSubmit = async (applyState) => {
  const data = {
    ...props.deptItem,
  }
  if (applyState === 4) {
    data.action = 'reject'
    data.remark = state.deptForm.remark
    deptForm.value.validate(async valid => {
      if (valid) {
        await leaveOperate(data);
        emits('closed');
      }
    })
  } else if (applyState === 3) {
    data.action = 'pass'
    await leaveOperate(data);
    emits('closed');
  }
}

const handelChoiceUser = (value) => {
  const user = state.userMap.get(value);
  state.deptForm.userName = user._id;
  state.deptForm.userEmail = user.userEmail;
}

const handelClosed = () => {
  emits('closed');
  state.deptForm = {}
}

</script>
<template>
  <el-dialog :title="deptItem?._id ? '修改部门' : '创建部门'" :model-value="isShowDialog" @closed="handelClosed">
    <el-form ref="deptForm" :rules="rules" :model="state.deptForm" label-width="150">
      <!-- 
        备注
      -->
      <el-form-item label="申请人">
        {{ deptItem.applyUser.userName }}
      </el-form-item>
      <el-form-item label="休假日期">
        {{ moment(deptItem.startTime).format('YYYY-MM-DD') }} -
        {{ moment(deptItem.endTime).format('YYYY-MM-DD') }}
      </el-form-item>
      <el-form-item label="休假时长">
        {{ day }}
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" rows="4" v-model="state.deptForm.remark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handelSubmit(3)">通过</el-button>
      <el-button @click="handelSubmit(4)" type="primary">驳回</el-button>
    </template>
  </el-dialog>
</template>